<template lang="html">
  <div class="nav-bar">
    <div class="nav-head">
      <img src="/backstage/admin/logo.png" alt="">
      <div class="logout">
        <div class="el-button el-button--theme el-button--small" @click='this.tologin' title='喜你成疾，药石无医'>
          退出
        </div>
      </div>
      <router-link to='/backstage/statistical'>数据统计</router-link>
      <router-link to='/backstage/manage'>企业管理</router-link>
      <router-link to='/backstage/user'>用户管理</router-link>
      <a href="javascript:;">
        <el-dropdown>
          <span class="el-dropdown-link">
            内容管理<i class="el-icon-caret-bottom el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <router-link to="/backstage/recommend"><el-dropdown-item>推荐阅读</el-dropdown-item></router-link>
            <router-link to="/backstage/banner"><el-dropdown-item>banner设置</el-dropdown-item></router-link>
            <router-link to="/backstage/hotword"><el-dropdown-item>热搜词设置</el-dropdown-item></router-link>
          </el-dropdown-menu>
        </el-dropdown>
      </a>
      <router-link to='/backstage/matter'>评价建议管理</router-link>
      <router-link to='/backstage/system'>系统管理</router-link>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
    }
  },
  methods: {
    tologin () {
      this.$router.push('./login')
    }
  }
}
</script>

<style lang="less">
.nav-bar{
  .nav-head{
    width: 1200px;
    margin: 0 auto;
    height: 60px;
    background-color: transparent;
    .el-dropdown{
      font-size: 16px;
      color: white;
    }
    img{
      margin-top: 10px;
      height: 40px;
      width: 154px;
      float: left;
      margin-right: 100px;
    }
    a{
      text-decoration: none;
      color: white;
      border-right: 1px solid #4179e6;
      padding:0 25px;
      float: left;
      height: 20px;
      margin-top: 20px;
      &:last-child{
        border-right: none;
      }
      &.router-link-active{
        color: #444;
      }
    }
    a + a{
      padding:0 25px;
      border-left: 1px solid #6fa0ff;
    }
    .avantar{
      float: right;
    }
    .logout{
      margin-top: 16px;
      cursor: pointer;
      float: right;
      .avantar{
        float: right;
        img{
          width: 30px;
          height: 30px;
          border-radius: 50%;
        }
      }
    }
  }
  margin: 0 auto;
  background-color: #488eff;
}

.el-dropdown-menu a{
  text-decoration: none;
  color: #488eff;
}
</style>
